<template lang="pug">
div(class="m-content")
  div(class="header") 云专线
  div(class="main")
    div(class="searchs")
      el-row
        el-col(:span="6")
          div(class="flex-block")
            div(class="name")  归属地市
            el-select(class="select" v-model="postConditions.areaCode"  @change="queryList")
              el-option(v-for="item in areaCodes" :key="item.value" :label="item.label" :value="item.value")
        el-col(:span="6")
          div(class="flex-block")
            div(class="name") 专线类型
            el-select(class="select" v-model="postConditions.vpnType" @change="queryList")
              el-option(v-for="item in shuttleType" :key="item.value" :label="item.label" :value="item.value")
        el-col(:span="6")
          .flex-block
            .name 创建时间
            el-date-picker(
              @change="queryList"
              type="datetimerange"
              v-model="datetimerange"
              value-format="timestamp"
              start-placeholder="时间段(起)"
              end-placeholder="时间段(止)")
        el-col(:span="6")
          div(class="searchTypeInput")
            el-input( placeholder="bizid、成员/组合接入号、vpcid" prefix-icon="el-icon-search" @keyup.enter.native="queryList" v-model="postConditions.searchWord" )
    .operation
      el-button(type="primary" icon="iconfont icon-daochu") 导出
    div(class="host-table")
      tr-table(:data="tableData" :columns="columnsData" :filterWidth=140)
        template(slot-scope="scope")
          el-button(type="text" icon="iconfont icon-biangeng" @click="changeAddress(scope)") 变更地址段
    div(class="el-pagination")
      el-pagination(
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :small="true"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="listQuery.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total")
</template>

<script>
import { specialcloud } from '@/api/resource'
import { areaCodes, shuttleType } from '@/utils/config'
import { isNull } from '@/utils/index'
const Netmask = require('netmask').Netmask
const defaulConditions = {
  areaCode: 'ALL',
  vpnType: 'ALL',
  searchType: 'ALL',
  searchWord: '',
  startTime: 0,
  endTime: 0
}

export default {
  data () {
    return {
      postConditions: Object.assign({}, defaulConditions),
      datetimerange: null,
      areaCodes,
      shuttleType,
      tableData: [],
      columnsData: [
        {
          prop: 'platformId',
          label: '成员接入号',
          handleClick: this.cloudDetail,
          formatter: () => ({ class: 'memNumber' }),
          hidden: true
        },
        { prop: 'combinationTag', label: '组合接入号' },
        { prop: 'userId', label: 'bizid' },
        { prop: 'vpcId', label: 'vpcid' },
        { prop: 'areaCode', label: '归属地市', formatter: this.getAreaCodeLabel },
        { prop: 'type', label: '专线类型', formatter: (prop, row) => ({ label: row[prop].toUpperCase() }) },
        { prop: 'z_vlan', label: 'vlan' },
        { prop: 'user_addr_seg', label: '客户侧地址段', unchecked: true },
        { prop: 'business_bw', label: '带宽', formatter: this.updateBusiness },
        { prop: 'createAt', label: '创建时间', formatter: (prop, row) => ({ label: this.$moment(row[prop]).format('YYYY-MM-DD HH:mm:ss') }), unchecked: true },
        { prop: 'lastTransactionAt', label: '更新时间', formatter: (prop, row) => ({ label: this.$moment(row[prop]).format('YYYY-MM-DD HH:mm:ss') }), hidden: true }
      ],
      total: 0,
      listQuery: {
        page_no: 1,
        page_size: 10
      }
    }
  },
  watch: {
    datetimerange (val) {
      // this.query()
    }
  },
  mounted () {
    this.getList(this.listQuery, this.postConditions)
  },
  methods: {
    handleSizeChange (val) {
      this.listQuery.page_size = val
      this.listQuery.page_no = 1
      this.getList(this.listQuery, this.postConditions)
    },
    handleCurrentChange (val) {
      this.listQuery.page_no = val
      this.getList(this.listQuery, this.postConditions)
    },
    getList (params, data) {
      if (isNull(this.datetimerange)) {
        data.startTime = ''
        data.endTime = ''
      } else if (this.datetimerange.length) {
        data.startTime = this.datetimerange[0]
        data.endTime = this.datetimerange[1]
      }
      // 获取云专线列表
      specialcloud.call(this, 'post', '/searcher/ct_vpns?&page_no=' + params.page_no + '&page_size=' + params.page_size, data, '').then(({ data }) => {
        for (let i of data.list) {
          let datas = JSON.parse(i.params)
          let _business
          if (datas.business_bw) {
            _business = datas.business_bw + 'Mbps'
          } else {
            _business = '0 Mbps'
          }
          i.business_bw = _business
          i.z_vlan = datas.z_vlan
          i.business_bw = _business
          if (datas.max_downlink_bw) {
            i.max_downlink_bw = datas.max_downlink_bw + 'Mbps'
          } else {
            i.max_downlink_bw = '0 Mbps'
          }
          let arr = []
          for (let i = 0; i < datas.user_addr_seg.length; i++) {
            let ret = new Netmask(datas.user_addr_seg[i] + '/' + datas.user_addr_seg_mask[i])
            let retStr = ret.base + '/' + ret.bitmask
            arr.push(retStr)
          }
          i.user_addr_seg = arr.join('; ')
        }
        this.tableData = data.list
        this.total = data.total
      })
    },
    // 查询
    queryList () {
      let value = this.postConditions.searchWord
      this.postConditions.searchType = 'ALL'
      if (/^\d{12,}$/.test(value)) {
        this.postConditions.searchType = 'BIZID'
      }

      if (/^\d+_[A-Z]{3,4}\d+$/.test(value)) {
        this.postConditions.searchType = 'REQUEST_ID,ORDER_ID'
      }

      if (/^\d+[a-z]{3,4}\d+$/.test(value)) {
        this.postConditions.searchType = 'PLATFORM_ID,COMBINATION_TAG'
      }
      this.getList(this.listQuery, this.postConditions)
    },
    // 跳转变更地址段
    changeAddress (scope) {
      let platformId = scope.row.platformId
      this.$router.push('/resource/view/SpecialCloud/Address?id=' + platformId)
    },
    // 详情
    cloudDetail (row) {
      let id = row.id
      this.$router.push('/resource/view/SpecialCloud/DetailsSpecial?id=' + id)
    },
    getAreaCodeLabel (prop, row) {
      let cond = row[prop]
      let obj = areaCodes.filter(v => v.value === cond + '')[0]
      return obj && { label: obj.label }
    },
    updateBusiness (prop, row) {
      if (row.type === 'pon') {
        return { label: row.max_downlink_bw || '--' }
      } else {
        return { label: row[prop] || '--' }
      }
    }
  }
}
</script>

<style scoped>
  .m-content .header {
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    border-bottom: 1px solid #e8e8e8;
    color: #333;
  }
  .m-content .main {
    padding: 15px 20px;
  }
  .m-content .main .searchs .flex-block {
    display: flex;
  }
  .m-content .main .searchs .flex-block .name {
    color: #666;
    width: 55px;
    word-break: keep-all;
    line-height: 28px;
    margin-right: 10px;
    text-align: right;
  }
  .select{
    flex: 1;
    margin-right:28px;
  }
  .searchTypeInput  .el-input{
    width:260px !important;
    margin-right:15px;
  }
  .searchTypeInput .el-button {
    display: inline;
    padding: 5px 15px;
    vertical-align: -2px;
  }
  .operation{
    margin-top:15px;
  }
  .el-pagination{
    margin-top: 15px;
  }

</style>

<style>
  .memNumber{
    color: #1f60bd;
    cursor: pointer;
  }
</style>
